<template>
	<view>
		<uni-popup ref="reserve" type="bottom" border-radius="16rpx 16rpx 0 0" @maskClick="maskClick" :safeArea="false" zindex>
			<view class="carListBox" >
				<view class="mo_titles">
					 配送状态
				</view>
				<view class="mo_contain">
					<scroll-view style="width: 100%;height:100%;" scroll-y scroll-with-animation>
					    <view class="time_list" v-for="(item,index) in statusList" :key="index">
								<view :style="{width:item.status==noBillStatus?'28rpx':'12rpx',display:'flex',flexWrap:'wrap',justifyContent:'center',marginLeft:item.status==noBillStatus?'0':'9rpx',marginTop:'5rpx'}">
									<view class="activeStates" v-if="item.status==noBillStatus"></view>
									<view class="unActs" v-else></view>	
									<view class="invs" :style="{height:item.status==noBillStatus?'55rpx':'67rpx'}" v-if="index!=statusList.length-1"></view>	
								</view>	
								<view class="status_right" :style="{marginLeft:item.status==noBillStatus?'0':'7rpx'}">
									  <view :class="item.status==noBillStatus?'right_act':'right_unact'">
									  	   {{item.labels}}
									  </view>
										<view :class="item.status==noBillStatus?'right_act':'right_unact'">
											   {{item.times}}
										</view>
								</view>
					    </view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	const props = defineProps({
		isPhonex:{
			type:Boolean,
			default:false
		},
	});
	const emit = defineEmits(["maskClick"])
	const reserve = ref()
	// '206': { text: '待付款，剩余', time: '14:53 分' },
	// '1139': { text: '商家待接单，剩余', time: '14:53 分' },
	// '1140': { text: '商家已接单，正在备货中' },
	// '1142': { text: '骑手已接单' },
	// '1143': { text: '骑手已取餐' },
	// '1144': { text: '订单配送中' },
	// '61': { text: '订单已完成' },
	// '827': { text: '待评价' },
	// '297': { text: '已评价' },
	// '310': { text: '已退款' },
	// '223': { text: '退款中' },
	// '224': { text: '退款中' },
	// '225': { text: '订单已取消' },
	// '819': { text: '待自提' }
	const noBillStatus=ref("61")
	const statusList=ref([
		{
			status:"61",
			labels:"订单已完成",
			times:"11:55"
		},{
			status:"1144",
			labels:"商品已送达",
			times:"11:55"
		},{
			status:"1143",
			labels:"骑手已取货",
			times:"11:37"
		},{
			status:"1142",
			labels:"商户已出餐",
			times:"11:36"
		},{
			status:"1140",
			labels:"骑手已到店",
			times:"11:28"
		},{
			status:"1139",
			labels:"商家已接单",
			times:"10:42"
		},{
			status:"1139",
			labels:"支付成功",
			times:"10:42"
		},{
			status:"1139",
			labels:"订单已提交",
			times:"10:42"
		}
	])
	const open = (v ?: any) => {
		reserve.value.open()
	}
	const maskClick = () => {
		emit("maskClick")
	}
	const close = () => {
		reserve.value.close()
	}

	defineExpose({ open, close })
</script>

<style lang="scss" scoped>
	.carListBox {
		width: 100vw;
		padding: 40rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		.mo_titles{
			color: #333;
			font-size: 32rpx;
			font-weight: 700;
			text-align: center;
		}
		.mo_contain{
			width: 100%;
			height:600rpx;
			margin-top: 40rpx;
			padding: 0 30rpx 0 20rpx;
		}
		.time_list{
			width: 100%;
			height: 90rpx;
			display: flex;
			.activeStates{
				width: 27rpx;
				height: 27rpx;
				border-radius:50%;
				border: 7rpx solid #53A87F;
				z-index: 9;
			}
			.unActs{
				width: 12rpx;
				height:12rpx;
				border-radius:50%;
				border: 6rpx solid #999;
				background: #999;
				// margin-left: 7rpx;
				z-index: 9;
			}
			.invs{
				width: 2rpx;
				background-color:rgba(224, 224, 224, 0.50);
				// margin-left: 13rpx;
				z-index: 8;
				margin-top: 5rpx;
			}
			.status_right{
				display: flex;
				justify-content: space-between;
				padding: 0 0rpx 0 20rpx;
				width: 645rpx;
				.right_unact{
					margin-top:-10rpx;
					color: #777;
					font-size: 32rpx;
				}
				.right_act{
					margin-top:-2rpx;
					color: #000;
					font-size: 32rpx;
					font-weight: 400;
				}
			}
		}
	}
</style>